<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:comp="http://java.sun.com/jsf/composite/ezcomp"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:p="http://primefaces.org/ui">
    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            Edit Quiz
        </ui:define>
        <ui:define name ="body" >   
            <h:messages globalOnly="false"/>
            <p:tabView>
                <p:tab title="Info">
                    <h:form>
                        <p:messages globalOnly="false"/>
                        <div class="formItem">
                            <h:outputText value ="Title" styleClass="inputLabel"/>
                            <p:inputText value="#{quizBuilder.quiz.title}" styleClass ="input text"/>
                        </div>                
                        <div class="formItem">                            
                            <h:outputText value ="Duration (minutes)" styleClass="inputLabel"/>
                            <p:inputText value="#{quizBuilder.quiz.duration}" styleClass="input text">
                                <f:validateLongRange minimum="1" maximum="60"/>
                            </p:inputText>
                        </div>
                        <div class="formItem">
                            <h:outputText value ="Category" styleClass="inputLabel"/>
                            <h:selectOneMenu value="#{quizBuilder.quiz.category}" styleClass="input">
                                <f:selectItems value="#{quizBuilder.categories}"/>
                            </h:selectOneMenu>
                        </div>
                        <h:commandButton value="Save Changes" action="#{quizBuilder.createQuiz()}" styleClass="input button"/>
                    </h:form>
                </p:tab>
                <p:tab title="Questions" id="qTab">
                    <div id="newQuestionForm">  
                        <h:form enctype="multipart/form-data" id="qForm" binding="#{qForm}">         
                            <div>
                                <label for="question" class="inputLabel">Q:</label> 
                                <p:inputTextarea value ="#{quizBuilder.currentText}" styleClass="input textArea"  cols ="40" rows="8"/>   
                            </div>
                            <div>
                            <label for="question"  class="inputLabel">A:</label>
                            <p:inputText value="#{quizBuilder.currentSolution}" cols="40" required="true" requiredMessage="You must enter a solution" styleClass="input text"/>
                            </div>
                            <div>
                            <h:outputText value="Upload audio/video" styleClass="inputLabel"/> 
                            <input type="file" name ="file" class="input file"/>
                            </div>                    
                            <h:commandButton value ="Add question as new set" action="#{quizBuilder.addAsNew}" styleClass="input button">
                                <p:ajax update="@form :#{results.clientId}" process="@form"/>
                            </h:commandButton>
                            <br/>
                            <h:panelGroup rendered ="#{not empty quizBuilder.quiz.questionSets}" binding="#{qSetButton}" id="qSetButton">
                                <h:commandButton value="Add question to set" action="#{quizBuilder.addToSet}" styleClass="input button" />                                
                                <h:selectOneMenu id="qSetMenu" value="#{quizBuilder.currentSet}" styleClass="input select">
                                    <f:selectItems value="#{quizBuilder.quiz.questionSets}" var="qSet" itemLabel="#{qSet.ordinal + 1}" itemValue="#{qSet.ordinal}"/>
                                </h:selectOneMenu>                        
                            </h:panelGroup>
                        </h:form>
                    </div>   
                <ol>
                    <h:panelGroup id="display" binding="#{results}">
                    <ui:repeat value ="#{quizBuilder.quiz.questionSets}" var ="qSet" varStatus="status">
                    <li>
                    <p:dataTable value="#{qSet.questions}" var ="question" id="table#{status.index}">
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Text Clue"/>
                            </f:facet>
                            <h:outputText value="#{question.textClue.text}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Solution"/>
                            </f:facet>
                            <h:outputText value="#{question.solution.text}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Audio/Video"/>
                            </f:facet>
                            <h:outputText value="#{question.mediaClue.text}"/>
                        </p:column>
                        <p:column>
                            <h:form>
                                <h:commandButton value="X" action="#{quizBuilder.removeQuestion(qSet, question)}">
                                    <p:ajax  process="@this" update=":#{results.clientId}, :#{qSetButton.clientId}, :#{qForm.clientId}" />
                                </h:commandButton>
                            </h:form>
                        </p:column>
                    </p:dataTable>
                    </li>
                    </ui:repeat>
                    </h:panelGroup>
                </ol>
                <h:form>
                    <h:commandButton value ="Save" action="#{quizBuilder.createQuiz()}" styleClass="input button"/>
                </h:form>

            </p:tab>
            </p:tabView>
        </ui:define>
    </ui:composition>
</html>

